<template>
  <div>
    <el-form ref="form" label-width="80px">
      <el-form-item label="月份" style="float:left;width: 300px;margin-right: 50px">
          <el-date-picker
            v-model="value4"
            type="month"
            placeholder="选择月">
          </el-date-picker>
      </el-form-item>
      <el-form-item label="员工姓名" style="float:left;width: 300px">
        <el-select v-model="value8" filterable placeholder="请选择" :remote-method="myConsole()">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div style="clear:both"></div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="工号" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="wages" label="薪资"></el-table-column>
      <el-table-column prop="previousWages" label="上月薪资"></el-table-column>
      <el-table-column prop="averageWages" label="平均薪资"></el-table-column>
      <el-table-column prop="relativeWages" label="与上月薪资相比"></el-table-column>
      <el-table-column prop="detail" label="详细信息"></el-table-column>
    </el-table>
  </div>
</template>
<script type="text/javascript">
  export default {
    data () {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value8: '',
        options4: [],
        value9: [],
        value4: [],
        list: [],
        loading: false,
        states: ['Alabama', 'Alaska', 'Arizona',
          'Arkansas', 'California', 'Colorado',
          'Connecticut', 'Delaware', 'Florida',
          'Georgia', 'Hawaii', 'Idaho', 'Illinois',
          'Indiana', 'Iowa', 'Kansas', 'Kentucky',
          'Louisiana', 'Maine', 'Maryland',
          'Massachusetts', 'Michigan', 'Minnesota',
          'Mississippi', 'Missouri', 'Montana',
          'Nebraska', 'Nevada', 'New Hampshire',
          'New Jersey', 'New Mexico', 'New York',
          'North Carolina', 'North Dakota', 'Ohio',
          'Oklahoma', 'Oregon', 'Pennsylvania',
          'Rhode Island', 'South Carolina',
          'South Dakota', 'Tennessee', 'Texas',
          'Utah', 'Vermont', 'Virginia',
          'Washington', 'West Virginia', 'Wisconsin',
          'Wyoming'],
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          wages:'9980',
          previousWages:'11000',
          averageWages:'9967',
          relativeWages: '-230',
          detail: '1002'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          wages:'9980',
          previousWages:'11000',
          averageWages:'9967',
          relativeWages: '-230',
          detail: '1002'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          wages:'9980',
          previousWages:'11000',
          averageWages:'9967',
          relativeWages: '-230',
          detail: '1002'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          wages:'9980',
          previousWages:'11000',
          averageWages:'9967',
          relativeWages: '-230',
          detail: '1002'
        }]
      }
    },
    methods: {
      myConsole () {
        console.log('Value:', this.value8)
      }
    }
  }
</script>
<style type="text/css">

</style>
